<script setup lang="ts">
import AvatarImg from '@/assets/avatar-default.png';
import VipImg from '@/assets/vip.png';
import PushImg from '@/assets/push.png';
import AboutImg from '@/assets/about.png';
import YjfkImg from '@/assets/yhxy.png';
import YsxyImg from '@/assets/ysxy.png';

import MessImg from '@/assets/mess.png';
import CollectionImg from '@/assets/collection.png';
import FootPrintImg from '@/assets/foot-print.png';
import AuthInfoImg from '@/assets/auth-info.png';

import { useUserStore } from '@/store/modules/user';
import { useRouterHelper } from 'vc/src/router';
import { generateCssVars } from '@vc/utils';
import {
  LINK_PROFILE_ABOUT,
  LINK_PROFILE_ACCOUNT, LINK_PROFILE_AUTH, LINK_PROFILE_COLLECTION, LINK_PROFILE_MESSAGE,
  LINK_PROFILE_PUSH,LINK_PROFILE_PROTOCOL,LINK_PROFILE_PRIVACY_POLICY
} from '../../router/routes/business/user';

interface Props {
  avatar?: string
  name?: string
}

const {
  avatar,
  name
} = defineProps<Props>();

const userStore = useUserStore();

const _avatar = computed(() => {
  return avatar ? avatar : AvatarImg;
});

const style = generateCssVars({
  'base-level-padding': 0,
  'item-height': '48px',
  'text-color': '#111'
}, 'menu');

const linkInfos = reactive([
{ title: '我的消息', icon: MessImg, path: LINK_PROFILE_MESSAGE },
  { title: '我的收藏', icon: CollectionImg, path: LINK_PROFILE_COLLECTION },
  { title: '我的足迹', icon: FootPrintImg, path: '' },
  { title: '我的认证', icon: AuthInfoImg, path: LINK_PROFILE_AUTH },
  { title: '推送设置', icon: PushImg, path: LINK_PROFILE_PUSH },
  { title: '关于我们', icon: AboutImg, path: LINK_PROFILE_ABOUT },
  { title: '用户协议', icon: YjfkImg, path: LINK_PROFILE_PRIVACY_POLICY },
  { title: '隐私政策', icon: YsxyImg , path: LINK_PROFILE_PROTOCOL }
]);

const { go } = useRouterHelper();
</script>

<template>
  <vc-popover
    :width="300"
    :showArrow="false"
    :offset="4"
    popperClass="user-popover"
    transition="vc-zoom-in-top"
    placement="bottom-start">
    <template #reference>
      <div class="flex justify-start align-center user-info">
        <vc-avatar :src="_avatar" :size="28"/>
        <!-- <span class="name">{{name}}</span> -->
      </div>
    </template>
    <div class="content" :style="style">
      <div class="header">
        <div class="flex justify-between align-center header-top">
          <div class="flex justify-start">
            <vc-avatar :src="_avatar" :size="44"/>
            <div class="ml-12px mt-4px">
              <div class="flex cursor-pointer align-center" :title="name"  @click="go(LINK_PROFILE_ACCOUNT)">
                <span class="name">{{ userStore.getUserInfo.nickname }}</span>
                <vc-icon icon="vi-arrow-right"/>
              </div>
              <div :title="userStore.getUserInfo.company" class="compTitle" v-if="userStore.getUserInfo.company">{{ userStore.getUserInfo.company }}</div>
            </div>
          </div>
          <img v-if="userStore.getUserInfo.level === 4" :src="VipImg" class="w-45px h-15px"/>
        </div>
        <div class="w-full">
          <ul class="link-infos">
            <li @click="go(item.path)" class="item" v-for="(item, index) in linkInfos" :key="index">
              <div class="flex justify-start">
                <img class="w-16px h-16px" :src="item.icon"/>
                <span class="title">{{item.title}}</span>
              </div>
              <vc-icon icon="vi-arrow-right"/>
            </li>
          </ul>
          <div class="h-full w-full flex-center">
            <el-button @click="userStore.logout()" class="change-color mt-16px">退出登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </vc-popover>
</template>

<style lang="scss">
.user-popover{
  height: 456px;
  box-shadow: 2px 4px 10px 0px rgba(187,187,187,0.3) !important;
  border-radius: 4px 4px 4px 4px !important;
  opacity: 1 !important;
  padding: 0 !important;
}
</style>

<style scoped lang="scss">
:deep(.change-color){
  &:hover{
    color: #02C680;
    background-color: rgba(231,247,243,0.3);
    border-color: #02C680;
  }
  &:focus{
    color: #02C680;
    background-color: rgba(231,247,243,0.3);
    border-color: #02C680;
  }
}
.content {
  .name {
    max-width: 145px;
    min-width: none;
    color: #333333;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    margin-right: 10px;
    word-break: break-all;
    @include line-clamp(1)
  }

  .header-top {
    padding: 16px 20px 12px 16px;
    border-bottom: 1px solid #F3F3F3;
    opacity: 1;
  }

  .link-top-infos {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #F6F6F6;
    .item {
      cursor: pointer;
      .title {
        margin-top: 10px;
        font-weight: 400;
        font-size: 14px;
        color: #111111;
      }
    }

  }
  .link-infos {
    padding: 10px 14px 16px;
    opacity: 1;
    border-bottom: 1px solid #F3F3F3;
    .item {
      cursor: pointer;
      height: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.2s;
      .title {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 16px;
        margin-left: 12px;
      }
      &:hover {
        background-color: rgba(2,198,128,0.1);
      }
    }
  }
}

.user-info {
  width: 36px;
  height: 36px;
  padding: 4px 4px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  &:hover {
    background: rgba(11,11,11,0.1);
    border-radius: 33px 33px 33px 33px;
  }

  .name {
    font-weight: 400;
    font-size: 13px;
    margin-left: 6px;
    word-break: break-all;
    @include line-clamp(1);

    &:hover {
    
    }
  }
  .vc-avatar {
    flex: none;
  }
}

.compTitle {
  font-weight: 400;
  font-size: 12px;
  margin-top: 4px;
  color: #8B8C8C;
  max-width: 145px;
  word-break: break-all;
  @include line-clamp(1);
}
</style>
